<template>
<div class="hello">
    <header-tab msg="登录"></header-tab>

    <div class="dflex">
        <img class="logo" :src="logoImg">
    </div>
    <p class="dflex mt10" style="font-size:3.55vw">{{ msg }}</p>
    <div class="smsRegister m0 mt20">
        <div class="dl codeBox">
            <van-field v-model="phoneNum" required clearable type="tel" placeholder="手机号" />
            <van-field oninput="if(value.length>6) value = value.slice(0,6)" v-model="code" required clearable type="digit" placeholder="验证码">
                <template #button>
                    <van-button size="small" type="primary" @click="getMa" v-if="getMaBut">获取验证码</van-button>
                    <van-button size="small" type="primary" v-if="timer">{{timerNo}}&nbsp;S</van-button>

                </template>
            </van-field>
        </div>

        <div class="agree">
            <span :class="isSelect?'agreeIcon agreeIconborder':'agreeIconborder'" style="border-bottom-color:#979797;" @click="selectAgree()"></span>
            <span @click="goAgree">同意用户协议</span>
        </div>
        <div class="dflex">
            <div class="btn mt20">
                <van-button round type="primary" size="large" @click="submitLogin">登录</van-button>
            </div>
        </div>
    </div>
</div>
</template>

<script>
import {
    verificationCode
} from '@/api/index';
import {
    setAllToken,
    getAllToken
} from '@/utils/auth';
import {
    Field,
    Button,
    Form,
    Toast
} from 'vant';
import HeaderTab from '../../components/HeaderTab'
export default {
    name: 'Hello',
    components: {
        [Field.name]: Field,
        [Button.name]: Button,
        [Form.name]: Form,
        [Toast.name]: Toast,
        HeaderTab
    },
    data() {
        return {
            logoImg:'https://cdn.92jiangbei.com/newjiangbei/img/newImg/login/img-logo.png ',
            msg: '欢迎登录奖呗',
            phoneIcon: 'https://cdn.92jiangbei.com/newjiangbei/img/login/icon-shouji.png',
            codeIcon: 'https://cdn.92jiangbei.com/newjiangbei/img/login/icon-yanzheng.png',
            isSelect: true,
            phoneNum: '',
            code: '',
            timer: false,
            timerNo: 60, //截止时间
            cutDownTime: 60,
            getMaBut: true, //获取验证码的button
            checked: false,
            memberNo: null
        }
    },
    created(){
        
    },
    methods: {
        selectAgree() {

            this.isSelect = !this.isSelect
        },
        goAgree() {
            this.$router.push('/agree')
        },

        backPreview() {
            this.$router.go(-1);
        },
        getMa() {
            let reg = 11 && /^((13|14|15|17|18)[0-9]{1}\d{8})$/ // 手机号正则验证
            let phoneNum = this.phoneNum // 输入手机号的value
            if (!phoneNum) {
                Toast('请输入手机号码')
                return
            }
            if (reg.test(phoneNum)) {

                let para = {
                    'mobile': this.phoneNum, //类型：String  必有字段  备注：手机号
                    "uuid": this.randomString(10) //类型：String  必有字段  备注：唯一标识
                }

                verificationCode(para).then((res) => {
                    // console.log("res的值:", res)
                    if (res.data.code == '000') {
                        this.getMaBut = false,
                            this.timer = true;
                        let t = setInterval(() => {
                            this.timerNo = Number(this.timerNo) - 1;
                            if (Number(this.timerNo) < 10 && Number(this.timerNo) >= 0) {
                                this.timerNo = "0" + Number(this.timerNo);
                            }
                            if (Number(this.timerNo) < 0) {
                                clearInterval(t);
                                this.getMaBut = true,
                                    this.timer = false;
                                this.timerNo = 60;
                                return;
                            }
                        }, 1000)
                    } else {
                        Toast('验证码错误')
                    }

                })

            } else {
                Toast('请输入正确的手机号码')
            }

        },
        randomString(len) {
            len = len || 32;
            var $chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz123456789'; /****默认去掉了容易混淆的字符oOLl,9gq,Vv,Uu,I1****/
            var maxPos = $chars.length;
            var pwd = '';
            for (let i = 0; i < len; i++) {
                pwd += $chars.charAt(Math.floor(Math.random() * maxPos));
            }
            return pwd;
        },

        submitLogin() {
            let reg = 11 && /^((13|14|15|16|17|18|19)[0-9]{1}\d{8})$/ // 手机号正则验证
            let phoneNum = this.phoneNum // 输入手机号的value
            if (!this.isSelect) {
                Toast('请勾选用户协议');
                return
            }
            if (reg.test(phoneNum) && this.code) {
                this.memberNo =JSON.parse(sessionStorage.getItem("memberNo"))

                console.log(this.memberNo)

                let para = {
                    "mobile": phoneNum, //类型：String  必有字段  备注：手机号
                    "verificationCode": this.code,
                    "channelNo": "001", //类型：String  必有字段  备注：验证码
                    "deviceId": this.randomString(10), //类型：String  必有字段  备注：设备id
                    "source": "4", //类型：String  必有字段  备注：注册来源1银行兑换码页面注册 2 小程序注册 3 APP注册 4 猜涨跌
                    "sharedSourceMemberNo": this.memberNo
                }
                
                let api = "LoginByUsername";
                
                this.$store.dispatch(api, para).then(res => {
                    
                    if (res.code == "000") {
                        console.log(para)   
                        this.$router.replace({
                            path: "/home",   //跳到我的页面
                            name: 'Home'
                        })

                        Toast('登录成功')
                        // this.$router.go(-1);
                    } else {
                        Toast(res.desc)
                        console.log(res.desc)
                    }

                }).catch((err) => {
                    Toast('网络异常，稍后重试')
                })

            } else {
                Toast('请输入手机号或验证码')
            }

        }
    },
}
</script>

<style lang="less" scoped>
.logo {
    width: 19.6vw;
    height: 21.73vw;
    margin: 14.26vw auto 0;
    display: block;
}

.smsRegister {
    width: 85vw;
    .codeBox{
        margin: 0 39px;
    }
    .van-button::before {
        width: 80%;
    }
    .van-field__control{
        margin-left: 7px!important;
    }
    .agree {
        width: 71.74%;
        margin: 1vw auto 10.4vw;
        font-size: 3.2vw;
        font-family: PingFangSC-Regular, PingFangSC;
        font-weight: 400;
        color: #7AA3FE;
        text-decoration: underline;
        // padding-left:6.4vw;
        // background:url("https://cdn.92jiangbei.com/newjiangbei/img/login/icon-tongyi.png") no-repeat left center;
        background-size: 3.73vw;
        box-sizing: border-box;

        span {
            display: block;
            float: left;
            line-height: 4.2vw;
            border-bottom: 1px solid #7AA3FE;
        }
    }
    .btn{
        width: 85%;
    }

    .agreeIcon,
    .agreeIconborder {
        width: 3.466vw;
        height: 3.466vw;
        border: 1px solid #979797;
        margin-right: 2vw;
        position: relative;
    }

    .agreeIcon:before,
    .agreeIcon:after {
        content: '';
        pointer-events: none;
        position: absolute;
        color: #000000;
        border: 1px solid;
        background-color: #000000;
    }

    .agreeIcon:before {
        width: 1px;
        height: 1px;
        left: 25%;
        top: 50%;
        transform: skew(0deg, 50deg);
    }

    .agreeIcon:after {
        width: 3px;
        height: 1px;
        left: 45%;
        top: 42%;
        transform: skew(0deg, -50deg);
    }

    .bg {
        color: red;
    }

    .green {
        color: green;
    }
}
</style>
